<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<meta name="theme-color" content="#222">
<meta name="generator" content="Hexo 4.0.0">
  <link rel="apple-touch-icon" sizes="180x180" href="/blogs/images/apple-touch-icon-next.png">
  <link rel="icon" type="image/png" sizes="32x32" href="/blogs/images/bitbug_favicon32.ico">
  <link rel="icon" type="image/png" sizes="16x16" href="/blogs/images/bitbug_favicon16.ico">
  <link rel="mask-icon" href="/blogs/images/logo.svg" color="#222">
  <meta name="google-site-verification" content="_KvCbCzf5L3mA7kIvuHnTWjO-GuqHGZIGKYQ3IiK0q8">

<link rel="stylesheet" href="/blogs/css/main.css">


<link rel="stylesheet" href="/blogs/lib/font-awesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.css">
  <link rel="stylesheet" href="/blogs/lib/pace/pace-theme-flat-top.min.css">
  <script src="/blogs/lib/pace/pace.min.js"></script>


<script id="hexo-configurations">
  var NexT = window.NexT || {};
  var CONFIG = {
    hostname: new URL('http://yifanstar.top').hostname,
    root: '/blogs/',
    scheme: 'Pisces',
    version: '7.5.0',
    exturl: false,
    sidebar: {"position":"left","display":"post","offset":12,"onmobile":false},
    copycode: {"enable":true,"show_result":true,"style":"default"},
    back2top: {"enable":true,"sidebar":true,"scrollpercent":true},
    bookmark: {"enable":false,"color":"#222","save":"auto"},
    fancybox: true,
    mediumzoom: false,
    lazyload: true,
    pangu: false,
    algolia: {
      appID: '',
      apiKey: '',
      indexName: '',
      hits: {"per_page":10},
      labels: {"input_placeholder":"Search for Posts","hits_empty":"We didn't find any results for the search: ${query}","hits_stats":"${hits} results found in ${time} ms"}
    },
    localsearch: {"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false},
    path: 'search.xml',
    motion: {"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"slideDownIn","post_body":"slideDownIn","coll_header":"slideLeftIn","sidebar":"slideUpIn"}},
    sidebarPadding: 40
  };
</script>

  <meta name="description" content="HTTP 是 HyperText Transfer Protocol（超文本传输协议）的简写，它是 TCP&#x2F;IP 协议集中的一个应用层协议，是客户端与服务端进行交互时必须遵循的规则。它用于定义 Web 浏览器与 Web 服务器之间交换数据的过程以及数据本身的格式，底层是靠 TCP 进行可靠地信息传输。">
<meta property="og:type" content="article">
<meta property="og:title" content="HTTP 协议入门">
<meta property="og:url" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;index.html">
<meta property="og:site_name" content="Star&#39;s Tech Blog">
<meta property="og:description" content="HTTP 是 HyperText Transfer Protocol（超文本传输协议）的简写，它是 TCP&#x2F;IP 协议集中的一个应用层协议，是客户端与服务端进行交互时必须遵循的规则。它用于定义 Web 浏览器与 Web 服务器之间交换数据的过程以及数据本身的格式，底层是靠 TCP 进行可靠地信息传输。">
<meta property="og:locale" content="zh-CN">
<meta property="og:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;http-process.png">
<meta property="og:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;five-layer-model.png">
<meta property="og:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;three-way-handshaking.png">
<meta property="og:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;url-format.png">
<meta property="og:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;request-message.png">
<meta property="og:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;reponse-message.png">
<meta property="og:updated_time" content="2020-02-13T02:18:48.000Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="http:&#x2F;&#x2F;yifanstar.top&#x2F;2020&#x2F;02&#x2F;13&#x2F;http-document&#x2F;http-process.png">

<link rel="canonical" href="http://yifanstar.top/2020/02/13/http-document/">


<script id="page-configurations">
  // https://hexo.io/docs/variables.html
  CONFIG.page = {
    sidebar: "",
    isHome: false,
    isPost: true,
    isPage: false,
    isArchive: false
  };
</script>

  <title>HTTP 协议入门 | Star's Tech Blog</title>
  


  <script>
    var _hmt = _hmt || [];
    (function() {
      var hm = document.createElement("script");
      hm.src = "https://hm.baidu.com/hm.js?9361113640e3a4ea27e831384b51c353";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(hm, s);
    })();
  </script>




  <noscript>
  <style>
  .use-motion .brand,
  .use-motion .menu-item,
  .sidebar-inner,
  .use-motion .post-block,
  .use-motion .pagination,
  .use-motion .comments,
  .use-motion .post-header,
  .use-motion .post-body,
  .use-motion .collection-header { opacity: initial; }

  .use-motion .site-title,
  .use-motion .site-subtitle {
    opacity: initial;
    top: initial;
  }

  .use-motion .logo-line-before i { left: initial; }
  .use-motion .logo-line-after i { right: initial; }
  </style>
</noscript>

</head>

<body itemscope itemtype="http://schema.org/WebPage">
  <div class="container use-motion">
    <div class="headband"></div>

    <header class="header" itemscope itemtype="http://schema.org/WPHeader">
      <div class="header-inner"><div class="site-brand-container">
  <div class="site-meta">

    <div>
      <a href="/blogs/" class="brand" rel="start">
        <span class="logo-line-before"><i></i></span>
        <span class="site-title">Star's Tech Blog</span>
        <span class="logo-line-after"><i></i></span>
      </a>
    </div>
        <p class="site-subtitle">壁立千仞，无欲则刚</p>
  </div>

  <div class="site-nav-toggle">
    <div class="toggle" aria-label="切换导航栏">
      <span class="toggle-line toggle-line-first"></span>
      <span class="toggle-line toggle-line-middle"></span>
      <span class="toggle-line toggle-line-last"></span>
    </div>
  </div>
</div>


<nav class="site-nav">
  
  <ul id="menu" class="menu">
        <li class="menu-item menu-item-home">

    <a href="/blogs/" rel="section"><i class="fa fa-fw fa-home"></i>首页</a>

  </li>
        <li class="menu-item menu-item-categories">

    <a href="/blogs/categories/" rel="section"><i class="fa fa-fw fa-th"></i>分类</a>

  </li>
        <li class="menu-item menu-item-archives">

    <a href="/blogs/archives/" rel="section"><i class="fa fa-fw fa-archive"></i>归档</a>

  </li>
        <li class="menu-item menu-item-about">

    <a href="/blogs/about/" rel="section"><i class="fa fa-fw fa-user"></i>关于</a>

  </li>
      <li class="menu-item menu-item-search">
        <a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索
        </a>
      </li>
  </ul>

</nav>
  <div class="site-search">
    <div class="popup search-popup">
    <div class="search-header">
  <span class="search-icon">
    <i class="fa fa-search"></i>
  </span>
  <div class="search-input-container">
    <input autocomplete="off" autocorrect="off" autocapitalize="none"
           placeholder="搜索..." spellcheck="false"
           type="text" id="search-input">
  </div>
  <span class="popup-btn-close">
    <i class="fa fa-times-circle"></i>
  </span>
</div>
<div id="search-result"></div>

</div>
<div class="search-pop-overlay"></div>

  </div>
</div>
    </header>

    
  <div class="reading-progress-bar"></div>

  <a href="https://github.com/yifanzheng" class="github-corner" title="Follow me on GitHub" aria-label="Follow me on GitHub" rel="noopener" target="_blank"><svg width="80" height="80" viewBox="0 0 250 250" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>


    <main class="main">
      <div class="main-inner">
        <div class="content-wrap">
          

          <div class="content">
            

  <div class="posts-expand">
      
  
  
  <article itemscope itemtype="http://schema.org/Article" class="post-block " lang="zh-CN">
    <link itemprop="mainEntityOfPage" href="http://yifanstar.top/blogs/2020/02/13/http-document/">

    <span hidden itemprop="author" itemscope itemtype="http://schema.org/Person">
      <meta itemprop="image" content="/blogs/images/avatar.jpg">
      <meta itemprop="name" content="yifanzheng">
      <meta itemprop="description" content="">
    </span>

    <span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization">
      <meta itemprop="name" content="Star's Tech Blog">
    </span>
      <header class="post-header">
        <h1 class="post-title" itemprop="name headline">
          HTTP 协议入门
        </h1>

        <div class="post-meta">
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-calendar-o"></i>
              </span>
              <span class="post-meta-item-text">发表于</span>
              

              <time title="创建时间：2020-02-13 10:12:50 / 修改时间：10:18:48" itemprop="dateCreated datePublished" datetime="2020-02-13T10:12:50+08:00">2020-02-13</time>
            </span>
            <span class="post-meta-item">
              <span class="post-meta-item-icon">
                <i class="fa fa-folder-o"></i>
              </span>
              <span class="post-meta-item-text">分类于</span>
                <span itemprop="about" itemscope itemtype="http://schema.org/Thing">
                  <a href="/blogs/categories/HTTP/" itemprop="url" rel="index">
                    <span itemprop="name">HTTP</span>
                  </a>
                </span>
            </span>

          
            <span id="/blogs/2020/02/13/http-document/" class="post-meta-item leancloud_visitors" data-flag-title="HTTP 协议入门" title="阅读次数">
              <span class="post-meta-item-icon">
                <i class="fa fa-eye"></i>
              </span>
              <span class="post-meta-item-text">阅读次数：</span>
              <span class="leancloud-visitors-count"></span>
            </span>
  
  <span class="post-meta-item">
    
      <span class="post-meta-item-icon">
        <i class="fa fa-comment-o"></i>
      </span>
      <span class="post-meta-item-text">Valine：</span>
    
    <a title="valine" href="/blogs/2020/02/13/http-document/#comments" itemprop="discussionUrl">
      <span class="post-comments-count valine-comment-count" data-xid="/blogs/2020/02/13/http-document/" itemprop="commentCount"></span>
    </a>
  </span>
  
  <br>
            <span class="post-meta-item" title="本文字数">
              <span class="post-meta-item-icon">
                <i class="fa fa-file-word-o"></i>
              </span>
                <span class="post-meta-item-text">本文字数：</span>
              <span>9.9k</span>
            </span>
            <span class="post-meta-item" title="阅读时长">
              <span class="post-meta-item-icon">
                <i class="fa fa-clock-o"></i>
              </span>
                <span class="post-meta-item-text">阅读时长 &asymp;</span>
              <span>9 分钟</span>
            </span>

        </div>
      </header>

    
    
    
    <div class="post-body" itemprop="articleBody">

      
        <p>HTTP 是 HyperText Transfer Protocol（超文本传输协议）的简写，它是 TCP/IP 协议集中的一个应用层协议，是客户端与服务端进行交互时必须遵循的规则。它用于定义 Web 浏览器与 Web 服务器之间交换数据的过程以及数据本身的格式，底层是靠 TCP 进行可靠地信息传输。</p>
<a id="more"></a>

<p>客户端向服务端发送 HTTP 请求返回的完整过程：</p>
<p><img alt="HTTP 请求返回流程" data-src="http-process.png"></p>
<h3 id="网络模型介绍"><a href="#网络模型介绍" class="headerlink" title="网络模型介绍"></a>网络模型介绍</h3><p><img alt="网络五层模型" data-src="five-layer-model.png"></p>
<p><strong>应用层</strong></p>
<p>应用层决定了向用户提供应用服务时通信的活动，它构建于 TCP 协议之上，HTTP协议也处于该层。</p>
<p>TCP/IP 协议族内预存了各类通用的应用服务。比如，FTP（File Transfer Protocol，文件传输协议）和 DNS（Domain Name System，域名系统）服务就是其中两类。</p>
<p><strong>传输层</strong></p>
<p>传输层对上层应用层，提供处于网络连接中的两台计算机之间的数据传输，向用户提供可靠的端到端服务，并且传输层向上层屏蔽了下层数据通信的细节。</p>
<p>传输层主要有两个协议: TCP （Transmission Control<br>Protocol，传输控制协议）和 UDP（User Data Protocol，用户数据<br>报协议）。</p>
<p>在更多的情况下，使用的是 TCP 协议，因为它是一个可靠的传输协议。</p>
<p><strong>网络层</strong></p>
<p>网络层，为数据在结点之间传输创建逻辑链路，用来处理在网络上流动的数据包。数据包是网络传输的最小数据单位。该层规定了通过怎样的路径(所谓的传输路线)到达对方计算机，并把数据包传送给对方。与对方计算机之间通过多台计算机或网络设备进行传输时，网络层所起的作用就是在众多的选项内选择一条传输路线。</p>
<p><strong>数据链路层</strong></p>
<p>数据链路层，在通信的实体间建立数据链路连接。简单地说，就是将两台物理设备通过软件服务（如操作系统，设备驱动）建立起电路上的连接，使两台设备可以传输数据。</p>
<p><strong>物理层</strong></p>
<p>物理层，主要作用是定义物理设备如何传输数据。这里的物理设备，包括电脑硬件，网线等。</p>
<h3 id="HTTP-协议发展历史"><a href="#HTTP-协议发展历史" class="headerlink" title="HTTP 协议发展历史"></a>HTTP 协议发展历史</h3><p><strong>HTTP/0.9</strong></p>
<p>HTTP 于 1990 年问世。那时的 HTTP 并没有作为正式的标准被建立。<br>现在的 HTTP 其实含有 HTTP1.0 之前版本的意思，因此被称为 HTTP/0.9。</p>
<p>该版本极其简单：</p>
<ul>
<li>只有一个命令 GET；</li>
<li>没有 Header 等描述数据的信息；</li>
<li>服务器在发送数据完毕后，就关闭 TCP 连接。</li>
</ul>
<p><strong>HTTP/1.0</strong></p>
<p>HTTP/1.0 版本与 HTTP/0.9 相比，主要有：</p>
<ul>
<li>增加了很多命令，如 POST，PUT，HEAD；</li>
<li>增加了 Status Code 和 Header 相关内容；</li>
<li>增加了多字符集支持、多部分发送(multi-part type)、权限(authorization)、缓存(cache)、内容编码(content encoding)等。</li>
</ul>
<p><strong>HTTP/1.1</strong></p>
<p>HTTP/1.1 是目前主流的 HTTP 版本，有比较完善的功能。</p>
<ul>
<li><p>增加了 PATCH OPTIONS、DELETE 命令。</p>
</li>
<li><p>持久连接，即 TCP 连接默认不关闭，可以被多个请求复用，提高了请求性能。</p>
</li>
<li><p>管道机制(pipeline)，即在同一个 TCP 连接里面，客户端可以同时发送多个请求。例如，浏览器同时发出 A 请求和 B 请求，但是服务器还是按照顺序，先回应 A 请求，完成后再回应 B 请求。</p>
</li>
<li><p>增加 Host 字段，可以将请求发往同一个服务器的不同网站，为虚拟主机打下了基础。这个字段增加的好处就是在同一个物理服务器中可以同时部署多个 Web 服务，这样可以提高物理服务器的使用效率。</p>
</li>
</ul>
<p><strong>HTTP2</strong></p>
<p>HTTP2 目前还没有普及，但肯定是未来的主流。HTTP2 主要解决了传输性能的问题。</p>
<ul>
<li><p>所有数据以二进制传输。在 HTTP/1.1 版本中大部分数据是以文本形式传输，在 HTTP2 版本中，所有数据以二进制传输，统称为“帧”。</p>
</li>
<li><p>多工。因为有了以二进制传输的好处，同一个连接里面发送多个请求不再需要按照顺序来进行返回处理，而是同时返回。在返回第一个请求的同时也可以返回第二个请求，这样它就是一个并行的效率，可以更大限度地让整个 Web 应用的传输效率有一个质的提升。</p>
</li>
<li><p>头信息压缩。在 HTTP/1.1 中，每次发送请求和返回请求，它的 HTTP 头信息总是要完整发送和返回，而这部分头信息内容是以字符串形式保存，所以它占用的带宽量是很大的。而 HTTP2 中，对头信息进行了压缩，减少了对带宽的占用。</p>
</li>
<li><p>服务器推送。HTTP/2 允许服务器未经请求，主动向客户端发送资源。常见场景是客户端请求一个网页，这个网页里面包含很多静态资源。正常情况下，客户端必须收到网页后，解析 HTML 源码，发现有静态资源，再发出静态资源请求。其实，服务器可以预期到客户端请求网页后，很可能会再请求静态资源，所以就主动把这些静态资源随着网页一起发给客户端了。</p>
</li>
</ul>
<h3 id="HTTP-三次握手"><a href="#HTTP-三次握手" class="headerlink" title="HTTP 三次握手"></a>HTTP 三次握手</h3><p><img alt="三次握手" data-src="three-way-handshaking.png"></p>
<p>为了准确无误地将数据送达目标处，TCP 协议采用了三次握手 (three-way handshaking) 策略。用 TCP 协议把数据包送出去后，TCP 不会对传送后的情况置之不理，它一定会向对方确认是否成功送达。握手过程中使用了 TCP 的标志——SYN(synchronize) 和 ACK(acknowledgement)。  </p>
<p>发送端首先发送一个带 SYN 标志的数据包给对方。接收端收到后，回传一个带有 SYN/ACK 标志的数据包以示传达确认信息。最后，发送端再回传一个带 ACK 标志的数据包，代表“握手”结束。  </p>
<p>通俗点讲，发送端先发送一个数据包给接收端，当接收端收到数据包后就会知道发送端的发送数据功能正常；然后接收端又返回一个数据包给发送端，当发送端接收到数据包后就会知道接收端的发送和接收数据的功能正常；最后发送端再先接收端发送一个数据包，当接收端收到数据包后就会知道发送端的接收数据的功能也正常。这样发送端和接收端的发送和接收数据的功能都正常，就可以可靠地进行数据交互了。</p>
<p>若在握手过程中某个阶段莫名中断，TCP 协议会再次以相同的顺序发送相同的数据包。</p>
<h3 id="URI、URL-和-URN"><a href="#URI、URL-和-URN" class="headerlink" title="URI、URL 和 URN"></a>URI、URL 和 URN</h3><p><strong>URI</strong></p>
<p>URI（统一资源标识符）是 Uniform Resource Identifier 的缩写。它主要用于定位某一类特定的资源而设计，用来唯一标识互联网上的信息资源。它包括 URL 和 URN。</p>
<p><strong>URL</strong></p>
<p>URL（统一资源定位符）是 Uniform Resource Locator 的缩写。它用来找到资源所在的位置，并且去访问和得到资源。</p>
<p>URL 格式：</p>
<p><img alt="URL 的格式" data-src="url-format.png"></p>
<ul>
<li>协议</li>
</ul>
<p>获取资源时要指定协议类型。比如，http、https、ftp 等协议。</p>
<ul>
<li>登录信息（认证）</li>
</ul>
<p>指定用户名和密码作为从服务器端获取资源时必要的登录信息（身份认证）。这种方式在现在的 Web 应用开发中不太会使用到。如果用户每次访问资源，都需要在 URL 中填写用户名和密码，是很不方便的，也是很安全的做法。</p>
<ul>
<li>服务器地址</li>
</ul>
<p>指定资源所在服务器在互联网中的位置。它可以是 ip 地址，也可以是 DNS 可解析的地址。</p>
<ul>
<li>服务器端口号</li>
</ul>
<p>指定服务器连接的网络端口号。每一台服务器都有很多的端口，在这台服务器上可以运行很多软件的 Web 服务，这些 Web 服务可以监听不同的端口。如果我们要找这台服务器上某一个 Web 服务里面的资源，就要指定要找的是哪个 Web 服务，也就是说端口是用来定位服务器上的某个 Web 服务的。</p>
<ul>
<li>资源路径</li>
</ul>
<p>指定服务器上的文件路径来定位特指的资源。这与 UNIX 系统的文件目录结构相似。</p>
<ul>
<li>查询字符串</li>
</ul>
<p>针对已指定的文件路径内的资源，可以使用查询字符串传入任意参数。</p>
<ul>
<li>片段标识符</li>
</ul>
<p>使用片段标识符通常可标记出已获取资源中的子资源(文档内的某个位置)。</p>
<p><strong>URN</strong></p>
<p>URN（永久统一资源定位符）是 Uniform Resource Name 的缩写。作为 HTTP 服务，如果某一类资源改变了位置，导致它的 URL 链接无法访问到资源，那么 URN 就解决了这个问题。也就是说，即便是资源改变了位置，通过 URN 还是可以访问到。</p>
<h3 id="HTTP-报文格式"><a href="#HTTP-报文格式" class="headerlink" title="HTTP 报文格式"></a>HTTP 报文格式</h3><p>用于 HTTP 协议交互的信息被称为 HTTP 报文。请求端（客户端）的 HTTP 报文叫做请求报文，响应端（服务器端）的叫做响应报文。HTTP 报文本身是由多行（用 CR+LF 作换行符）数据构成的字符串文本。HTTP 报文大致可分为<strong>报文首部</strong>和<strong>报文主体</strong>两块。两者由最初出现的空行(CR+LF)来划分。通常，并不一定要有报文主体。</p>
<p><strong>请求报文</strong></p>
<p>请求报文是由请求方法、请求 URL、协议版本、可选的请求首部字段和内容实体构成的。</p>
<p><img alt="请求报问文" data-src="request-message.png"></p>
<p><strong>响应报文</strong></p>
<p>响应报文基本上由协议版本、状态码(表示请求成功或失败的数字代码)、用以解释状态码的原因短语、可选的响应首部字段以及实体主体构成。</p>
<p><img alt="响应报文" data-src="reponse-message.png"></p>
<h3 id="HTTP-方法"><a href="#HTTP-方法" class="headerlink" title="HTTP 方法"></a>HTTP 方法</h3><p>HTTP 方法是用来定义对资源的操作，从定义上讲有各自的语义。注意，语义是定义上的，具体的操作需要根据实际情况来。</p>
<p>HTTP/1.0 和 HRTTP/1.1 支持的方法：</p>
<p>| 方法 | 说明 | 支持的 HTTP 协议版本 |<br>| – | – | – | – |<br>|  GET |  获取资源  |   1.0、1.1  |<br>|  POST |  传输实体主体  |   1.0、1.1  |<br>|  PUT |  传输文件  |   1.0、1.1  |<br>|  HEAD |  获得报文首部  |   1.0、1.1  |<br>|  DELETE |  删除文件  |   1.0、1.1  |<br>|  OPTIONS |  询问支持的方法  |  1.1  |<br>|  TRACE |  追踪路径  |  1.1  |<br>|  CONNECT |  要求用隧道协议连接代理  |  1.1  |<br>|  LINK |  建立和资源之间的联系  |  1.0  |<br>|  UNLINE |  断开连接关系  |  1.0  |</p>
<p>其中，LINK 和 UNLINK 已被 HTTP/1.1 废弃，不再使用。</p>
<p><strong>GET: 获取资源</strong></p>
<p>GET 方法用来请求访问已被 URL 识别的资源。指定的资源经服务器端解析后返回响应内容。</p>
<p><strong>POST: 传输实体主体</strong></p>
<p>POST 方法用来传输实体的主体。虽然用 GET 方法也可以传输实体的主体，但一般不用 GET 方法进行传输，而是用 POST 方法。虽说POST 的功能与 GET 很相似，但 POST 的主要目的并不是获取响应的主体内容。</p>
<p><strong>PUT: 传输文件</strong></p>
<p>PUT 方法用来传输文件。就像 FTP 协议的文件，上传一样，要求在请求报文的主体中包含文件内容，然后保存到请求 URL 指定的位置。  </p>
<p>但是，鉴于 HTTP/1.1 的 PUT 方法自身不带验证机制，任何人都可以上传文件，存在安全性问题，因此一般的 Web 网站不使用该方法。若配合 Web 应用程序的验证机制，或架构设计采用 REST(REpresentationalState ransfer, 表征状态转移) 标准的同类Web 网站，就可能会开放使用 PUT 方法。</p>
<p><strong>HEAD: 获得报文首部</strong></p>
<p>HEAD 方法和 GET 方法一样，只是不返回报文主体部分。用于确认 URL 的有效性及资源更新的日期时间等。</p>
<p><strong>DELETE: 删除文件</strong></p>
<p>DELETE 方法用来删除文件，是与 PUT 相反的方法。DELETE 方法按请求  URL 删除指定的资源。  </p>
<p>但是，HTTP/1.1 的 DELETE 方法和 PUT 方法一样不带验证机制，所以一般的 Web 网站也不使用 DELETE 方法。当配合 Web 应用程序的验证机制，或遵守 REST 标准时还是有可能会开放使用的。</p>
<p><strong>OPTIONS: 询问支持的方法</strong></p>
<p>OPTIONS 方法用来查询针对请求 URL 指定的资源支持的方法。就是我们常说的，预请求。</p>
<p><strong>TRACE: 追踪路径</strong></p>
<p>TRACE 方法是让 Web 服务器端将之前的请求通信环回给客户端的方法。  </p>
<p>但是，TRACE 方法本来就不怎么常用，再加上它容易引发 XST（Cross-Site Tracing，跨站追踪）攻击，通常就更不会用到了。</p>
<p><strong>CONNECT: 要求用隧道协议连接代理</strong></p>
<p>CONNECT 方法要求在与代理服务器通信时建立隧道，实现用隧道协议进行 TCP 通信。主要使用 SSL （Secure Sockets Layer，安全套接层）和 TLS （Transport Layer Security，传输层安全）协议把通信内容加密后经网络隧道传输。</p>
<p>CONNECT 的格式：</p>
<blockquote>
<p>CONNECT 代理服务器名称 端口号 HTTP版本</p>
</blockquote>
<h3 id="HTTP-访问控制-CORS"><a href="#HTTP-访问控制-CORS" class="headerlink" title="HTTP 访问控制(CORS)"></a>HTTP 访问控制(CORS)</h3><p><strong>CORS</strong></p>
<p>跨域资源共享(CORS)是一种机制，它使用额外的 HTTP 头来告诉浏览器  让运行在一个服务器上的 Web 应用被准许访问来自不同源服务器上的指定的资源。当一个资源从与该资源本身所在的服务器<strong>不同的域、协议或端口</strong>请求一个资源时，资源会发起一个<strong>跨域 HTTP 请求</strong>。</p>
<p>另外，规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个<strong>预请求</strong>（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）。</p>
<p>跨域：指不同域名之间相互访问，浏览器不能执行其他网站的脚本。它是由浏览器的<a href="https://developer.mozilla.org/zh-CN/docs/Web/Security/Same-origin_policy" target="_blank" rel="noopener">同源策略</a>造成的，是浏览器施加的安全机制。</p>
<p>同域：指同一协议、同一 ip 地址、同一端口，其中有一个不同就会产生跨域。</p>
<p><strong>预请求</strong></p>
<p>预请求必须首先使用 <code>OPTIONS</code> 方法发起一个请求到服务器，以获知服务器是否允许该实际请求。预请求的使用，可以避免跨域请求对服务器的用户数据产生未知的影响。</p>
<p>当满足以下条件时，可以不发送预请求：</p>
<ul>
<li><p>HTTP 方法  </p>
<ul>
<li>GET</li>
<li>HEAD</li>
<li>POST</li>
</ul>
</li>
<li><p>Fetch Standard 定义的 <a href="https://fetch.spec.whatwg.org/#cors-safelisted-request-header" target="_blank" rel="noopener">CORS-safelisted request-header</a>。安全的 request-header 如下：  </p>
<ul>
<li>Accept</li>
<li>Accept-Language</li>
<li>Content-Language</li>
<li>Content-Type（需要注意额外的限制）</li>
<li>DPR</li>
<li>Downlink</li>
<li>Save-Data</li>
<li>Viewport-Width</li>
<li>Width</li>
</ul>
</li>
<li><p>Content-Type 的值仅限于下列三者之一：</p>
<ul>
<li>text/plain</li>
<li>multipart/form-data</li>
<li>application/x-www-form-urlencoded</li>
</ul>
</li>
<li><p>XMLHttpRequestUpload 对象均没有注册任何事件监听器（不常用）。</p>
</li>
<li><p>请求中没有使用 ReadableStream 对象（不常用）。</p>
</li>
</ul>
<p>这些跨域请求与浏览器发出的其他跨域请求一样。如果服务器未返回正确的响应首部，则请求方不会收到任何数据。因此，那些不允许跨域请求的网站无需为这一新的 HTTP 访问控制特性担心。  </p>
<p><strong>预请求相关的响应首部字段</strong></p>
<ul>
<li>Access-Control-Allow-Origin</li>
</ul>
<p>Access-Control-Allow-Origin 响应首部字段，表明服务器允许访问资源的域。其语法如下：</p>
<blockquote>
<p>Access-Control-Allow-Origin: [origin] | *  </p>
</blockquote>
<p>其中，origin 参数的值指定了允许访问该资源的外域 URI。对于不需要携带身份凭证的请求，服务器可以指定该字段的值为 “*”，表示允许来自所有域的请求。</p>
<ul>
<li>Access-Control-Allow-Headers</li>
</ul>
<p>Access-Control-Allow-Headers 响应首部字段用于预请求的响应，指明了实际请求中允许携带的首部字段。其语法如下：</p>
<blockquote>
<p>Access-Control-Allow-Headers: [field-name]（自定义的请求头） | *</p>
</blockquote>
<p>当有多个请求头时，使用逗号分隔。</p>
<ul>
<li>Access-Control-Expose-Headers</li>
</ul>
<p>在跨域访问时，XMLHttpRequest 对象的 getResponseHeader() 方法只能拿到一些最基本的响应头，如 Cache-Control、Content-Language、Content-Type、Expires、Last-Modified 等，如果要访问其他头，则需要服务器设置响应头。</p>
<p>Access-Control-Expose-Headers 响应首部字段让服务器把允许浏览器访问的头放入白名单，例如：</p>
<blockquote>
<p>Access-Control-Expose-Headers: X-My-Count, X-My-Title</p>
</blockquote>
<ul>
<li>Access-Control-Allow-Methods</li>
</ul>
<p>Access-Control-Allow-Methods 响应首部字段用于预请求的响应，指明了实际请求所允许使用的 HTTP 方法。其语法如下：</p>
<blockquote>
<p>Access-Control-Allow-Methods: [method] | *</p>
</blockquote>
<p>当有多个方法时，用逗号分隔。</p>
<ul>
<li>Access-Control-Max-Age   </li>
</ul>
<p>Access-Control-Max-Age 响应首部字段指定了预请求的结果能够被缓存多久。在有效时间内，浏览器无须为同一请求再次发起预请求。请注意，浏览器自身维护了一个最大有效时间，如果该首部字段的值超过了最大有效时间，将不会生效。其语法如下：</p>
<blockquote>
<p>Access-Control-Max-Age: [detla-seconds]</p>
</blockquote>
<p>detla-seconds 参数表示预请求的结果在多少秒内有效。</p>
<ul>
<li>Access-Control-Allow-Credentials</li>
</ul>
<p>Access-Control-Allow-Credentials 响应首部字段指定了当浏览器的 credentials 设置为 true 时是否允许浏览器读取 response 的内容。当用在对预请求的响应中时，它指定了实际的请求是否可以使用 credentials。请注意：简单 GET 请求不会被预检；如果对此类请求的响应中不包含该字段，这个响应将被忽略掉，并且浏览器也不会将相应内容返回给网页。</p>
<h3 id="可缓存性"><a href="#可缓存性" class="headerlink" title="可缓存性"></a>可缓存性</h3><p>HTTP/1.1 定义的 <code>Cache-Control</code> 头用来区分对缓存机制的支持情况，请求头和响应头都支持这个属性。通过它提供的不同的值来定义缓存策略。</p>
<p><strong>公共缓存 public</strong></p>
<blockquote>
<p>Cache-Control: public  </p>
</blockquote>
<p>“public” 表示 HTTP 请求在返回的过程中，所经过的任何路径（比如中间代理、CDN等）都可以对响应的内容进行缓存。</p>
<p><strong>私有缓存 private</strong></p>
<blockquote>
<p>Cache-Control: private</p>
</blockquote>
<p>“private” 表示响应内容只有发起请求的那个浏览器可缓存。</p>
<p><strong>强制确认缓存 no-cache</strong></p>
<blockquote>
<p>Cache-Control: no-cache  </p>
</blockquote>
<p>“no-cache” 表示每次有请求发出时，缓存会将此请求发到服务器，服务器端会验证请求中所描述的缓存是否过期，若未过期，则缓存才使用本地缓存副本。使用 no-cache 指令的目的是为了防止从缓存中返回过期的资源。</p>
<p><strong>禁止进行缓存 no-store</strong></p>
<blockquote>
<p>Cache-Control: no-store</p>
</blockquote>
<p>“no-store” 表示缓存中不得存储任何关于客户端请求和服务端响应的内容。每次由客户端发起的请求都会下载完整的响应内容。</p>
<p><strong>缓存过期机制 max-age</strong></p>
<blockquote>
<p>Cache-Control: max-age=[seconds]</p>
</blockquote>
<p>过期机制中，最重要的指令是 “max-age=<seconds>“，表示资源能够被缓存的最大时间。</seconds></p>
<p><strong>缓存验证确认 must-revalidate</strong></p>
<p>“must-revalidate” 表示在设置了 max-age 的缓存中，必须先从服务端重新请求资源，以验证缓存是否真的过期了，而不能直接使用本地的缓存。</p>
<h3 id="缓存验证"><a href="#缓存验证" class="headerlink" title="缓存验证"></a>缓存验证</h3><p>当缓存的文档过期后，需要进行缓存验证或者重新获取资源。只有在服务器返回强校验器或者弱校验器时才会进行验证。</p>
<p><strong>Last Modified</strong></p>
<p>Last-Modified（上次修改时间）响应头可以作为一种弱校验器，通过对比上次修改时间以验证资源是否需要更新。说它弱是因为它只能精确到一秒。如果响应头里含有这个信息，客户端可以在后续的请求中带上 <code>If-Modified-Since</code> 或 <code>If-Unmodified-Since</code> 来验证缓存。</p>
<p><strong>ETag</strong></p>
<p>ETag 是缓存的一种强校验器，主要通过数据签名进行资源验证，最典型的做法是对资源进行哈希值计算。如果资源请求的响应头里含有 ETag，客户端可以在后续的请求的头中带上 <code>If-Match</code> 或 <code>If-None-Match</code> 头来验证缓存。</p>
<p>最后，当客户端向服务端发起缓存校验的请求时，服务端会返回 <code>200 ok</code> 表示返回正常的结果或者 <code>304 Not Modified</code>（不返回 body）表示浏览器可以使用本地缓存文件。304 的响应头也可以同时更新缓存文档的过期时间。</p>
<h3 id="HTTP-Cookie"><a href="#HTTP-Cookie" class="headerlink" title="HTTP Cookie"></a>HTTP Cookie</h3><p>HTTP Cookie（也叫 Web Cookie 或浏览器 Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下一次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie 使基于无状态的 HTTP 协议记录稳定的状态信息成为了可能。</p>
<p>Cookie 主要用于以下三个方面：</p>
<ul>
<li>会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）</li>
<li>个性化设置（如用户自定义设置、主题等）</li>
<li>浏览器行为跟踪（如跟踪分析用户行为等）</li>
</ul>
<p>Cookie 曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie 渐渐被淘汰。由于服务器指定 Cookie 后，浏览器的每次请求都会携带 Cookie 数据，会带来额外的性能开销。</p>
<p><strong>设置 Cookie</strong></p>
<p>当服务器收到 HTTP 请求时，服务器可以在响应头里面添加一个 Set-Cookie 选项。浏览器收到响应后通常会保存下 Cookie，之后对该服务器每一次请求中都通过 Cookie 请求头部将 Cookie 信息发送给服务器。另外，Cookie 的过期时间、域、路径、有效期、适用站点都可以根据需要来指定。</p>
<p>服务器使用 Set-Cookie 响应头部向用户代理（一般是浏览器）发送 Cookie 信息，告知客户端保存 Cookie 信息。其语法如下：</p>
<blockquote>
<p>Set-Cookie: [cookie name]= [value]</p>
</blockquote>
<p>Cookie 是以键值对形式存在的，可以同时设置多个，以逗号分隔。</p>
<p><strong>Cookie 属性</strong></p>
<ul>
<li>max-age  </li>
</ul>
<p>设置 Cookie 有效期，单位秒。例如：</p>
<blockquote>
<p>Set-Cookie: id=123; max-age=200</p>
</blockquote>
<ul>
<li>expires  </li>
</ul>
<p>设置 Cookie 过期时间。例如：</p>
<blockquote>
<p>Set-Cookie: id=123; expires=Wed, 21 Oct 2015 07:28:00 GMT;</p>
</blockquote>
<ul>
<li>secure</li>
</ul>
<p>Cookie 的 secure 属性用于限制 Web 页面仅在 HTTPS 安全连接时，<br>才可以发送Cookie。其语法如下：</p>
<blockquote>
<p>Set-Cookie: id=123; secure</p>
</blockquote>
<ul>
<li>HttpOnly</li>
</ul>
<p>Cookie 的 HttpOnly 属性是 Cookie 的扩展功能，它使 JavaScript 脚本的 Document.cookie API 无法获得 Cookie。其主要目的为防止跨站脚本攻击（Cross-sitescripting，XSS）对 Cookie 的信息窃取。其语法如下：</p>
<blockquote>
<p>Set-Cookie: id=123; HttpOnly</p>
</blockquote>
<ul>
<li>domain</li>
</ul>
<p>domain 标识指定了哪些主机可以接受  Cookie。如果不指定，默认为当前文档的主机（不包含子域名）。比如，当指定 example.com 后，除 example.com 以外，<a href="http://www.example.com" target="_blank" rel="noopener">www.example.com</a> 或 www2.example.com 等都可以发送 Cookie。其语法如下：</p>
<blockquote>
<p>Set-Cookie: id=123; domain=example.com</p>
</blockquote>
<h3 id="HTTP-持久连接"><a href="#HTTP-持久连接" class="headerlink" title="HTTP 持久连接"></a>HTTP 持久连接</h3><p>为解决上述 TCP 连接的问题，HTTP/1.1 和一部分的 HTTP/1.0 想出了持久连接（HTTP Persistent Connections，也称为 HTTP keep-alive 或 HTTP connection reuse）的方法。持久连接的特点是，只要任意一端没有明确提出断开连接，则保持 TCP 连接状态。</p>
<p>持久连接的好处在于减少了 TCP 连接的重复建立和断开所造成的额外开销，减轻了服务器端的负载。另外，减少开销的那部分时间，使 HTTP 请求和响应能够更早地结束，这样 Web 页面的显示速度也就相应提高了。</p>
<p>在 HTTP/1.1 中，所有的连接默认都是持久连接。响应头格式如下：</p>
<blockquote>
<p>Connection: keep-alive | close</p>
</blockquote>
<h3 id="数据协商"><a href="#数据协商" class="headerlink" title="数据协商"></a>数据协商</h3><p>数据协商机制是指客户端和服务器端就响应的资源内容进行交涉，然后提供给客户端最为适合的资源。数据协商会以响应资源的语言、字符集、编码方式等作为判断的基准。</p>
<p>请求报文和响应报文中的某些首部字段可以作为判断基准，字段分为请求和返回两类。</p>
<p><strong>请求类</strong></p>
<ul>
<li><p>Accept：用户代理（浏览器）可处理的数据类型。</p>
</li>
<li><p>Accept-Charset：用户代理（浏览器）可接受的字符集。</p>
</li>
<li><p>Accept-Encoding：用户代理（浏览器）可接受的数据编码方式，主要限制服务端如何进行数据压缩。</p>
</li>
<li><p>Accept-Language：用户代理（浏览器）可接受的自然语言类型。</p>
</li>
<li><p>User-Agent：HTTP 客户端程序的信息.</p>
</li>
</ul>
<p><strong>返回类</strong></p>
<ul>
<li><p>Content-Type：响应内容的数据类型。</p>
</li>
<li><p>Content-Encoding：响应内容的编码方式。</p>
</li>
<li><p>Content-Language：响应内容的自然语言类型。</p>
</li>
</ul>
<h3 id="参考"><a href="#参考" class="headerlink" title="参考"></a>参考</h3><p>HTTP 技术：<a href="https://developer.mozilla.org/zh-CN/docs/Web/HTTP" target="_blank" rel="noopener">https://developer.mozilla.org/zh-CN/docs/Web/HTTP</a></p>

    </div>

    
    
    
        

<div>
<ul class="post-copyright">
  <li class="post-copyright-author">
    <strong>本文作者： </strong>Star.Y.Zheng
  </li>
  <li class="post-copyright-link">
    <strong>本文链接：</strong>
    <a href="/blogs/http:/yifanstar.top/2020/02/13/http-document/" title="HTTP 协议入门">http://yifanstar.top/2020/02/13/http-document/</a>
  </li>
  <li class="post-copyright-license">
    <strong>版权声明： </strong>本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deep.zh" rel="noopener" target="_blank"><i class="fa fa-fw fa-creative-commons"></i>BY-NC-SA</a> 许可协议。转载请注明出处！
  </li>
</ul>
</div>


      <footer class="post-footer">

        


        
    <div class="post-nav">
      <div class="post-nav-item">
    <a href="/blogs/2020/02/08/elasticsearch-setup/" rel="prev" title="Widows 环境下安装 ElasticSearch 并配置 ElasticSearch Head">
      <i class="fa fa-chevron-left"></i> Widows 环境下安装 ElasticSearch 并配置 ElasticSearch Head
    </a></div>
      <div class="post-nav-item">
    <a href="/blogs/2020/03/09/angular-controlvalueaccessor/" rel="next" title="Angular: [ControlValueAccessor] 自定义表单控件">
      Angular: [ControlValueAccessor] 自定义表单控件 <i class="fa fa-chevron-right"></i>
    </a></div>
    </div>
      </footer>
    
  </article>
  
  
  

  </div>


          </div>
          
    <div class="comments" id="comments"></div>

        </div>
          
  
  <div class="toggle sidebar-toggle">
    <span class="toggle-line toggle-line-first"></span>
    <span class="toggle-line toggle-line-middle"></span>
    <span class="toggle-line toggle-line-last"></span>
  </div>

  <aside class="sidebar">
    <div class="sidebar-inner">

      <ul class="sidebar-nav motion-element">
        <li class="sidebar-nav-toc">
          文章目录
        </li>
        <li class="sidebar-nav-overview">
          站点概览
        </li>
      </ul>

      <!--noindex-->
      <div class="post-toc-wrap sidebar-panel">
          <div class="post-toc motion-element"><ol class="nav"><li class="nav-item nav-level-3"><a class="nav-link" href="#网络模型介绍"><span class="nav-number">1.</span> <span class="nav-text">网络模型介绍</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-协议发展历史"><span class="nav-number">2.</span> <span class="nav-text">HTTP 协议发展历史</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-三次握手"><span class="nav-number">3.</span> <span class="nav-text">HTTP 三次握手</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#URI、URL-和-URN"><span class="nav-number">4.</span> <span class="nav-text">URI、URL 和 URN</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-报文格式"><span class="nav-number">5.</span> <span class="nav-text">HTTP 报文格式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-方法"><span class="nav-number">6.</span> <span class="nav-text">HTTP 方法</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-访问控制-CORS"><span class="nav-number">7.</span> <span class="nav-text">HTTP 访问控制(CORS)</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#可缓存性"><span class="nav-number">8.</span> <span class="nav-text">可缓存性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#缓存验证"><span class="nav-number">9.</span> <span class="nav-text">缓存验证</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-Cookie"><span class="nav-number">10.</span> <span class="nav-text">HTTP Cookie</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#HTTP-持久连接"><span class="nav-number">11.</span> <span class="nav-text">HTTP 持久连接</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#数据协商"><span class="nav-number">12.</span> <span class="nav-text">数据协商</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#参考"><span class="nav-number">13.</span> <span class="nav-text">参考</span></a></li></ol></div>
      </div>
      <!--/noindex-->

      <div class="site-overview-wrap sidebar-panel">
        <div class="site-author motion-element" itemprop="author" itemscope itemtype="http://schema.org/Person">
    <img class="site-author-image" itemprop="image" alt="yifanzheng"
      src="/blogs/images/avatar.jpg">
  <p class="site-author-name" itemprop="name">yifanzheng</p>
  <div class="site-description" itemprop="description"></div>
</div>
<div class="site-state-wrap motion-element">
  <nav class="site-state">
      <div class="site-state-item site-state-posts">
          <a href="/blogs/archives/">
        
          <span class="site-state-item-count">42</span>
          <span class="site-state-item-name">日志</span>
        </a>
      </div>
      <div class="site-state-item site-state-categories">
            <a href="/blogs/categories/">
          
        <span class="site-state-item-count">7</span>
        <span class="site-state-item-name">分类</span></a>
      </div>
  </nav>
</div>
  <div class="links-of-author motion-element">
      <span class="links-of-author-item">
        <a href="https://github.com/yifanzheng" title="GitHub → https:&#x2F;&#x2F;github.com&#x2F;yifanzheng" rel="noopener" target="_blank"><i class="fa fa-fw fa-github"></i>GitHub</a>
      </span>
      <span class="links-of-author-item">
        <a href="/blogs/zhengyifan1996@outlook.com" title="E-Mail → zhengyifan1996@outlook.com"><i class="fa fa-fw fa-envelope"></i>E-Mail</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://blog.csdn.net/oschina_41790905" title="CSDN → https:&#x2F;&#x2F;blog.csdn.net&#x2F;oschina_41790905" rel="noopener" target="_blank"><i class="fa fa-fw fa-book"></i>CSDN</a>
      </span>
      <span class="links-of-author-item">
        <a href="https://www.zhihu.com/people/kevin-zrl/activities" title="知  乎 → https:&#x2F;&#x2F;www.zhihu.com&#x2F;people&#x2F;kevin-zrl&#x2F;activities" rel="noopener" target="_blank"><i class="fa fa-fw fa-globe"></i>知  乎</a>
      </span>
  </div>
  <div class="cc-license motion-element" itemprop="license">
    <a href="https://creativecommons.org/licenses/by-nc-sa/4.0/deep.zh" class="cc-opacity" rel="noopener" target="_blank"><img src="/blogs/images/cc-by-nc-sa.svg" alt="Creative Commons"></a>
  </div>


  <div class="links-of-blogroll motion-element">
    <div class="links-of-blogroll-title">
      <i class="fa fa-fw fa-link"></i>
      友情链接
    </div>
    <ul class="links-of-blogroll-list">
        <li class="links-of-blogroll-item">
          <a href="https://kalasearch.cn/blog" title="https:&#x2F;&#x2F;kalasearch.cn&#x2F;blog" rel="noopener" target="_blank">搜索技术博客</a>
        </li>
        <li class="links-of-blogroll-item">
          <a href="https://jackypy.xyz/" title="https:&#x2F;&#x2F;jackypy.xyz" rel="noopener" target="_blank">Jacky的编程空间</a>
        </li>
    </ul>
  </div>

      </div>
        <div class="back-to-top motion-element">
          <i class="fa fa-arrow-up"></i>
          <span>0%</span>
        </div>

    </div>
  </aside>
  <div id="sidebar-dimmer"></div>


      </div>
    </main>

    <footer class="footer">
      <div class="footer-inner">
        

<div class="copyright">
  
  &copy; 2019 – 
  <span itemprop="copyrightYear">2020</span>
  <span class="with-love">
    <i class="fa fa-user"></i>
  </span>
  <span class="author" itemprop="copyrightHolder">yifanzheng</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-area-chart"></i>
    </span>
      <span class="post-meta-item-text">站点总字数：</span>
    <span title="站点总字数">209k</span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item-icon">
      <i class="fa fa-coffee"></i>
    </span>
      <span class="post-meta-item-text">站点阅读时长 &asymp;</span>
    <span title="站点阅读时长">3:10</span>
</div>
  <div class="powered-by">由 <a href="https://hexo.io/" class="theme-link" rel="noopener" target="_blank">Hexo</a> 强力驱动
  </div>
  <span class="post-meta-divider">|</span>
  <div class="theme-info">主题 – <a href="https://pisces.theme-next.org/" class="theme-link" rel="noopener" target="_blank">NexT.Pisces</a>
  </div>

        
<div class="busuanzi-count">
  <script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script>
    <span class="post-meta-item" id="busuanzi_container_site_uv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-user"></i>
      </span>
      
       <span class="site-uv">
        我的第 <span id="busuanzi_value_site_uv"></span> 位朋友
      </span>
    </span>
    <span class="post-meta-divider">|</span>
    <span class="post-meta-item" id="busuanzi_container_site_pv" style="display: none;">
      <span class="post-meta-item-icon">
        <i class="fa fa-eye"></i>
      </span>
      
      <span class="site-pv">
         历经 <span class="busuanzi-value" id="busuanzi_value_site_pv"></span> 次回眸才与你相遇
      </span>
    </span>
</div>






  <script>
  function leancloudSelector(url) {
    return document.getElementById(url).querySelector('.leancloud-visitors-count');
  }
  if (CONFIG.page.isPost) {

    function addCount(Counter) {
      var visitors = document.querySelector('.leancloud_visitors');
      var url = visitors.getAttribute('id').trim();
      var title = visitors.getAttribute('data-flag-title').trim();

      Counter('get', `/classes/Counter?where=${JSON.stringify({ url })}`)
        .then(response => response.json())
        .then(({ results }) => {
          if (results.length > 0) {
            var counter = results[0];
              leancloudSelector(url).innerText = counter.time + 1;
            Counter('put', '/classes/Counter/' + counter.objectId, { time: { '__op': 'Increment', 'amount': 1 } })
              .then(response => response.json())
              .catch(error => {
                console.log('Failed to save visitor count', error);
              })
          } else {
              leancloudSelector(url).innerText = 'Counter not initialized! More info at console err msg.';
              console.error('ATTENTION! LeanCloud counter has security bug, see how to solve it here: https://github.com/theme-next/hexo-leancloud-counter-security. \n However, you can still use LeanCloud without security, by setting `security` option to `false`.');
            
          }
        })
        .catch(error => {
          console.log('LeanCloud Counter Error', error);
        });
    }
  } else {

    function showTime(Counter) {
      var visitors = document.querySelectorAll('.leancloud_visitors');
      var entries = [...visitors].map(element => {
        return element.getAttribute('id').trim();
      });

      Counter('get', `/classes/Counter?where=${JSON.stringify({ url: { '$in': entries } })}`)
        .then(response => response.json())
        .then(({ results }) => {
          if (results.length === 0) {
            document.querySelectorAll('.leancloud_visitors .leancloud-visitors-count').forEach(element => {
              element.innerText = 0;
            });
            return;
          }
          for (let item of results) {
            let { url, time } = item;
            leancloudSelector(url).innerText = time;
          }
          for (let url of entries) {
            var element = leancloudSelector(url);
            if (element.innerText == '') {
              element.innerText = 0;
            }
          }
        })
        .catch(error => {
          console.log('LeanCloud Counter Error', error);
        });
    }
  }

  fetch('https://app-router.leancloud.cn/2/route?appId=he11KIfTimP774DIwOLg585T-gzGzoHsz')
    .then(response => response.json())
    .then(({ api_server }) => {
      var Counter = (method, url, data) => {
        return fetch(`https://${api_server}/1.1${url}`, {
          method: method,
          headers: {
            'X-LC-Id': 'he11KIfTimP774DIwOLg585T-gzGzoHsz',
            'X-LC-Key': 'VmxHgnRk3q2S9CMyTgm1pXkW',
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(data)
        });
      };
      if (CONFIG.page.isPost) {
        if (CONFIG.hostname !== location.hostname) return;
        addCount(Counter);
      } else if (document.querySelectorAll('.post-title-link').length >= 1) {
        showTime(Counter);
      }
    });
  </script>


        
      </div>
    </footer>
  </div>

  
  
  <script color='0,0,255' opacity='0.5' zIndex='-1' count='99' src="/blogs/lib/canvas-nest/canvas-nest.min.js"></script>
  <script src="/blogs/lib/anime.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js"></script>
  <script src="//cdn.jsdelivr.net/gh/fancyapps/fancybox@3/dist/jquery.fancybox.min.js"></script>
  <script src="//cdn.jsdelivr.net/npm/lozad@1/dist/lozad.min.js"></script>
  <script src="/blogs/lib/velocity/velocity.min.js"></script>
  <script src="/blogs/lib/velocity/velocity.ui.min.js"></script>
<script src="/blogs/js/utils.js"></script><script src="/blogs/js/motion.js"></script>
<script src="/blogs/js/schemes/pisces.js"></script>
<script src="/blogs/js/next-boot.js"></script>



  
  <script>
    (function(){
      var bp = document.createElement('script');
      var curProtocol = window.location.protocol.split(':')[0];
      bp.src = (curProtocol === 'https') ? 'https://zz.bdstatic.com/linksubmit/push.js' : 'http://push.zhanzhang.baidu.com/push.js';
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(bp, s);
    })();
  </script>




  <script src="/blogs/js/local-search.js"></script>













        

        


<script>
NexT.utils.getScript('//unpkg.com/valine/dist/Valine.min.js', () => {
  var GUEST = ['nick', 'mail', 'link'];
  var guest = 'nick,mail,link';
  guest = guest.split(',').filter(item => {
    return GUEST.includes(item);
  });
  new Valine({
    el: '#comments',
    verify: false,
    notify: false,
    appId: 'he11KIfTimP774DIwOLg585T-gzGzoHsz',
    appKey: 'VmxHgnRk3q2S9CMyTgm1pXkW',
    placeholder: "欢迎留言！",
    avatar: 'mm',
    meta: guest,
    pageSize: '10' || 10,
    visitor: true,
    lang: 'zh-cn' || 'zh-cn',
    path: location.pathname,
    recordIP: false,
    serverURLs: ''
  });
}, window.Valine);
</script>


  

  <script async src="/js/cursor/love.min.js"></script>




  <script async src="/js/activate-power-mode.min.js"></script>
  <script>
    POWERMODE.colorful = true;
    POWERMODE.shake = false;
    document.body.addEventListener('input', POWERMODE);
  </script>




  <script src="https://cdn.jsdelivr.net/npm/moment@2.22.2/moment.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/moment-precise-range-plugin@1.3.0/moment-precise-range.min.js"></script>
  <script>
    function timer() {
      // 建站时间
      var startDate = moment(20191124,"YYYYMMDD");
      // 目前时间
      var now = moment();
      var duration = moment.duration(now.diff(startDate));
      var days = Math.floor(duration.asDays());
      var hours = Math.floor(duration.asHours() - days * 24);
      var minutes = Math.floor(duration.asMinutes() - Math.floor(duration.asHours()) * 60);
      var seconds = Math.floor(duration.asSeconds() - Math.floor(duration.asMinutes()) * 60);

      var textStr = "";

      if (days >=0) {
        textStr = textStr + days + " 天 ";
      }

      if (hours >= 0) {
       if (String(hours).length === 1) {
          hours = "0" + hours;
        }
        textStr = textStr + hours + " 时 ";
      }

      if (minutes >= 0) {
       if (String(minutes).length === 1) {
          minutes = "0" + minutes;
        }
        textStr = textStr + minutes + " 分 ";
      }
      
      if (seconds >= 0) {
       if (String(seconds).length === 1) {
          seconds = "0" + seconds ;
        }
        textStr = textStr + seconds + " 秒 ";
      }
      
      textStr = textStr.replace(/\d+/g, '<span style="color:#1890ff">$&</span>');
      div.innerHTML = `我已在此等候你 ${textStr}`;
    }
    var div = document.createElement("div");
    // 插入到copyright之后
    var copyright = document.querySelector(".copyright");
    document.querySelector(".footer-inner").insertBefore(div, copyright.nextSibling);
    timer();
    setInterval("timer()", 1000)
  </script>


</body>
</html>
